* {
    padding: 0 0;
    margin: 0 0;
}

.bj {
    height: 45rem;
    display: flex;
    /* //页面背景颜色 */
    /* background-color: rgb(0, 0, 0); */
    background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-06-10%2F5ee08a75d21e1.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656072934&t=47288b97da5396baf978a9ecc23e9390) no-repeat;
}

.button {
    /* //相对位置 */
    position: relative;
    margin: 0 auto;
    margin-top: 300px;
    border-radius: 45%;
    width: 100px;
    height: 100px;
    text-align: center;
    /* //渐变颜色背景 */
    background-image: linear-gradient(to right,
            rgb(72, 72, 240),
            yellow,
            rgb(255, 34, 237),
            rgb(78, 78, 248));
    /* //将颜色条的长度拉伸为原来的400% */
    background-size: 400%;
    cursor: pointer;
    /* //显示在上面 */
    z-index: 1;
}

.button::before {
    content: "";
    /* //绝对位置 */
    position: absolute;
    /* //上下左右向外扩展4px */
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border-radius: 35px;
    /* //渐变颜色条 */
    background-image: linear-gradient(to right,
            rgb(72, 72, 240),
            yellow,
            rgb(255, 34, 237),
            rgb(78, 78, 248));
    /* //将颜色条拉伸为原来的400% */
    background-size: 400%;
    /* //设置模糊 */
    filter: blur(12px);
    /* //显示在下面 */
    z-index: -1;
}

/* //按钮层动画 */
.button:hover {
    /* //动画名为light，持续时间为8s，infinite 循环播放 */
    animation: light 8s infinite;
}

/* //发光层动画 */
.button:hover::before {
    animation: light 8s infinite;
}

/* //控制动画效果 */
@keyframes light {
    100% {

        background-position: -400% 0;
    }
}

.dl {
    margin: 0 auto;
    line-height: 95px;
    font-size: 30px;
    color: white;
    font-family: 幼圆;
}